<script setup>
import { ref,watch} from 'vue';
import { useStore } from 'vuex';

const store = useStore();

const hotFrameworks = ref([]);
function updateHotFrameworks() {
  const sortedProjects = [...store.state.recentProjectslist];
  sortedProjects.sort((a, b) => compareModifiedDates(a.modified, b.modified));
  const uniqueFrameworks = new Set();
  const result = [];
  for (const project of sortedProjects) {
    // const framework = project.framework[0].name[0]?project.framework[0].name[0]:[];
    const framework = project.framework[0]?.name[0] || [];
    if(framework.length===0)continue
    if (!uniqueFrameworks.has(framework)) {
      uniqueFrameworks.add(framework);
      result.push(framework);
    }
  }
  hotFrameworks.value = result;
}

watch(() => store.state.recentProjectslist, () => {
  // 当 recentProjectslist 变化时，更新 
  updateHotFrameworks();
});


// 辅助函数：比较两个 "x天前" 格式的日期字符串，返回比较结果
function compareModifiedDates(modifiedA, modifiedB) {
  const daysAgoA = parseInt(modifiedA);
  const daysAgoB = parseInt(modifiedB);
  return daysAgoA - daysAgoB;
}

const updateSelectedFramework = (framework) => {
  console.log(framework);
  store.commit('setSelectFramework', framework);
}

// const hotFrameworks = ['Java','node','C++','Vue','Flask'];
// const bindHotFrameworks = v-bind(hotFrameworks);

</script>

<template>
  <div class="flex-1 bg-white rounded-xl pr-10 pl-5 pt-1.5" style="min-width: 300px">
    <div class="font-bold text-xl pl-4 mt-5">快捷方式</div>
    <div class="bg-gray-100 mt-2 mb-5 ml-4" style="height: 1px"></div>
    <div class="flex items-center my-3" v-for="item in hotFrameworks" :key="item">
      <div class="w-24 text-gray-600 flex-1 pl-5">{{ item }}</div>
      <el-button type="primary" @click="updateSelectedFramework">添加</el-button>
    </div>
  </div>
</template>
